<template>
  <div class="PianoIcon page-p">
    <ul class="key-box" v-bind:class="{ active: isActive }">
      <li v-for="(item,index) of icon" :key="index" @click="cool(index)">
        {{item.id}}
        <span></span>
      </li>
    </ul>
    <audio :src="kong" ref="audio">
      <source type="audio/mpeg" />
    </audio>

    <audio :src="kong" ref="af">
      <source type="audio/mpeg" />
    </audio>
    <ul class="fix" v-bind:class="{ activef: isActive }">
      <li @click="back">
        <Icon type="ios-arrow-back" />
      </li>
      <li @click="beg">
        <Icon type="ios-download-outline" />
      </li>
      <li @click="close">
        <Icon type="ios-close" />
      </li>
    </ul>
    <div>{{time}}</div>
  </div>
</template>

<script>
export default {
  name: "PianoIcon",
  data() {
    return {
      kong: " ",
      isPlaying: false,
      arry: [],
      kongtw: "",
      isActive: true,
      time: 0,
      icon: [
        { id: "do", Src: require("../assets/piano/1do.mp3") },
        { id: "re", Src: require("../assets/piano/2re.mp3") },
        { id: "mi", Src: require("../assets/piano/3mi.mp3") },
        { id: "fa", Src: require("../assets/piano/4fa.mp3") },
        { id: "sol", Src: require("../assets/piano/5so.mp3") },
        { id: "la", Src: require("../assets/piano/6la.mp3") },
        { id: "si", Src: require("../assets/piano/7si.mp3") },
        { id: "do", Src: require("../assets/piano/8do.mp3") }
      ]
    };
  },
  components: {},
  created() {},
  mounted() {
    const that = this;
    window.onresize = () => {
      return (() => {
        window.screenWidth = document.body.clientWidth;
        that.screenWidth = window.screenWidth;
        window.screenWidth > 600
          ? (this.isActive = false)
          : (this.isActive = true);
      })();
    };
  },

  methods: {
    back() {
     this.$router.push({ name: 'About'})
    },
    cool: function(index) {
      var d = 0
      setInterval(function() {
        
        ++d
        console.log(d);
      }, 1000);

      this.arry.push(index);
      this.$refs.audio.src = this.icon[index].Src;
      this.$refs.audio.play();
    },
    beg() {
      var arry = this.arry,
        ab = this.$refs.af,
        ac = this.icon,
        num = 0;
      var t = setInterval(function() {
        if (num >= arry.length) {
          clearInterval(t);
        }
        num++;
        ab.src = ac[arry[num - 1]].Src;
        ab.play();
      }, 650);
    },
    close() {
      this.arry = [];
    }
  }
};
</script>
<style lang='scss' >
.PianoIcon {
  height: 820px;
  background-color: rgb(54, 54, 54);
}
.key-box {
  width: 98%;
  li {
    position: relative;
    float: left;
    width: 12%;
    height: 320px;
    border: 2px solid black;
    background: white;
    text-align: center;
    box-shadow: 10px 10px 20px black;
    span {
      position: absolute;
      right: -20px;
      background: #000;
      height: 150px;
      width: 40px;
      border-radius: 2px;
      z-index: 1;
    }
  }
}
.active {
  width: 170%;
  transform: rotateZ(90deg) translateX(310px) translateY(-60px);
}
.activef {
  transform: rotateZ(90deg);
  right: 140px;
  bottom: -120px;
  position: fixed;
  z-index: 2;
}
.key-box :last-child span {
  display: none;
}
.fix {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 35px;
  height: 320px;
}
</style>
